<template>
  <div>
    <!-- <h1>人气推荐详情</h1> -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img :src="item.pic" alt="" />
      </van-swipe-item>
    </van-swipe>

    <div>
      <h6>{{ basicInfo.name }}</h6>
      <h6>{{ basicInfo.characteristic }}</h6>
      <p>{{ basicInfo.originalPrice }}</p>
      <p>{{ basicInfo.minPrice }}</p>
    </div>
    <!-- 这一部分 商品信息的样式大家自己调 -->
    <ul class="detail-tab">
      <li class="center" @click="flag = 0" :class="{ active: flag == 0 }">
        商品介绍
      </li>
      <li class="center" @click="flag = 1" :class="{ active: flag == 1 }">
        商品评价
      </li>
    </ul>

    <div v-if="flag == 0" v-html="content" class="content"></div>
    <!-- 商品介绍 -->
    <div v-else>
      <span>暂无数据</span>
    </div>
    <!-- 商品评价  商品评价暂时没有数据-->

    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" dot />
      <van-action-bar-icon
        icon="cart-o"
        text="购物车"
        :badge="$store.getters.allNum"
        @click="$router.push('/shopcar')"
      />
      <van-action-bar-icon icon="shop-o" text="店铺" />
      <van-action-bar-button
        type="warning"
        text="加入购物车"
        @click="show = true"
      />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
    <!-- 底部的动作栏 -->

    <van-popup
      v-model:show="show"
      closeable
      position="bottom"
      class="shopcar-popup"
    >
      <div class="first-floor">
        <img :src="basicInfo.pic" alt="" />
        <div>
          <h5>{{ basicInfo.name }}</h5>
          <h6>{{ actInfo.price ? actInfo.price : basicInfo.originalPrice }}</h6>
          <!-- 有确切价格就显示确切价格 没有就显示 我们商品信息里的价格 -->
        </div>
      </div>
      <div class="second-floor">
        <ul>
          <li v-for="(item, index) in properties" :key="item.id">
            <p>{{ item.name }}</p>
            <div>
              <span
                v-for="i in item.childsCurGoods"
                :key="i.id"
                @click="selectPro(index, i)"
                :class="{ active: i.name == select[index] }"
                >{{ i.name }}</span
              >
              <!-- :class="{ active: i.name == select[index] }" -->
              <!-- 判断当前的规格 和  选中的数组中的规格是不是一致  一致就有一个选中的颜色 -->
            </div>
          </li>
        </ul>
      </div>
      <div class="third-floor">
        <span>购买数量</span>
        <van-stepper v-model="goodsNum" />
      </div>
      <div class="four-floor center" @click="add">加入购物车</div>
    </van-popup>
    <!-- 点击加入购物车出现的弹出框 展示商品的规格信息 -->
  </div>
</template>
<script>
import { useRoute } from "vue-router";
import { getRecDetail, getPrice } from "../../utils/home.js";
import { reactive, toRefs } from "vue";
import { useStore } from "vuex";

export default {
  setup(props) {
    const store = useStore();
    const route = useRoute();

    const id = route.params.id;
    //接收路由传来的参数
    const data = reactive({
      banner: [],
      //保存轮播图
      basicInfo: "",
      // 保存商品基本信息
      flag: 0,
      // 保存tab栏选中的状态
      content: "",
      // 图文介绍
      show: false,
      //底部弹框出现隐藏
      properties: [],
      //规格数据
      select: [],
      //选中的规格 因为有多个规格所以是一个数组, 这里存的是选中name
      selectId: [],
      //选中的规格 存选中的id
      actInfo: "",
      // 选了规格之后 得到的一个确切的信息 包含 id和价格
      goodsNum: "",
      // 加入购物车的数量
    });
    getRecDetail({ id }).then((res) => {
      console.log(res);
      data.banner = res.data.pics;
      data.basicInfo = res.data.basicInfo;
      data.content = res.data.content;
      data.properties = res.data.properties;
    });
    //拿到详情的数据把他存下来

    const selectPro = (index, i) => {
      data.select[index] = i.name;
      // 把选中的规格的name存进选中的数组select中
      data.selectId[index] = i.id;

      //把选中的规格的id存下来

      getPrice({
        goodsId: data.basicInfo.id,
        //把商品id传过去
        propertyChildIds: data.selectId.join(","),
        //规格id后台需要的是一个字符串用，拼接的
      }).then((res) => {
        console.log(res);
        data.actInfo = res.data;
      });
      //通过 传递商品id和 规格id 请求到确切的选了规格之后的信息
    };
    //选择规格的时候存进数组中

    const add = () => {
      let goodsItem = {
        title: data.basicInfo.name,
        img: data.basicInfo.pic,
        price: data.actInfo.price || data.basicInfo.originalPrice,
        id: data.actInfo.id,
        properties: data.select.join(" "),
        num: data.goodsNum,
        status: false,
        //status状态为后面写全选做准备
      };
      store.commit("add", goodsItem);
      // 我们需要一条商品信息加入购物车 在这里我们需要
      // 商品图片 标题 确切价格 确切id 规格 数量
      // 这样的一条数据现在没有 所以我们需要自己造一条这样的数据
      data.show = false;
      //加完购物车让弹框隐藏
    };
    //添加购物车的方法
    return { ...toRefs(data), selectPro, add };
  },

  // 在这个页面里 拿到详情页的数据后
  // 重点是选择规格
  // 然后下一步 是 根据选择的不同的规格请求确切的价格
};
</script>
<style lang="scss">
.my-swipe {
  height: 375px;
  img {
    width: 100%;
    height: 100%;
  }
}
.detail-tab {
  width: 100%;
  height: 40px;
  display: flex;
  li {
    flex: 1;
    border-bottom: 3px solid rgba(0, 0, 0, 0);
  }
  .active {
    border-bottom: 3px solid #ff0000;
  }
}
.content {
  img {
    width: 375px !important;
    height: auto !important;
  }
  .img-wrap {
    width: 375px !important;
  }
}
.shopcar-popup {
  font-size: 12px;
  color: #333;
  .first-floor {
    display: flex;
    padding: 14px;
    box-sizing: border-box;

    img {
      width: 60px;
      height: 60px;
    }
    div {
      margin-left: 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      h5 {
        font-size: 12px;
        color: #333;
        font-weight: normal;
      }
    }
  }
  .third-floor {
    display: flex;
    justify-content: space-between;
    height: 70px;
    padding: 14px;
    box-sizing: border-box;
    align-items: center;
  }
  .four-floor {
    height: 43px;
    color: #fff;
    font-size: 16px;
    background: #b7282e;
  }
  .second-floor {
    padding: 20px;
    box-sizing: border-box;
    p {
      margin: 10px 0;
    }
    span {
      display: inline-block;
      // width: 56px;
      padding: 0 10px;
      height: 32px;
      margin: 8px 8px 0 0px;
      border-radius: 4px;
      border: 1px solid #d9d9d9;
      text-align: center;
      line-height: 32px;
    }
  }
  > div {
    border-bottom: 1px solid #e9e9e9;
  }
  .active {
    border: 1px solid #b6272d !important;
  }
}
</style>
